<!-- 修改组件(选择) -->
<template>
  <div class="update-container">
    <div class="item">
      <el-avatar :size="60" :src="props.avatar" v-if="props.avatar" />
      <p v-for="(item, index) in dataArr" :key="index">
        <span class="label" :style="{ width: `${labelWidth}px` }">{{
          item.label
        }}</span
        ><span>:</span><span class="text">{{ item.text }}</span>
      </p>
    </div>
    <div class="item icon">
      <Icon type="change"></Icon>
    </div>
    <div class="item">
      <PickBox v-bind="$attrs" :labelWidth="labelWidth"></PickBox>
    </div>
  </div>
</template>

<script setup>
import Icon from "../Icon/index.vue";
import PickBox from "../PickBox/index.vue";
defineOptions({
  inheritAttrs: false,
});

const props = defineProps({
  avatar: {
    type: String,
  },
  dataArr: {
    type: Array,
    required: true,
  },
  labelWidth: {
    type: Number,
    default: 50,
  },
});
</script>

<style lang="less" scoped>
@import "@/styles/var.less";
.update-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .item {
    flex: 1;
    &.icon {
      text-align: center;
    }
  }
  .label {
    display: inline-block;
    text-align-last: justify;
    text-align: justify;
    text-justify: distribute;
  }
  span {
    margin: 0 2px;
    &.text {
      font-weight: 600;
      color: @second;
    }
  }
  p {
    margin: 5px 0;
  }
  .icon-container {
    font-size: 3em;
  }
}
</style>